ProTable - Advanced Tables

ProTable was created to solve the problem of having to write a lot of sample code for tables in a project, so a lot of common logic was encapsulated in it. These wrappers can be simply categorized as pre-defined behaviors and pre-defined logic.

Thanks to ProForm's capabilities, ProForm can take many forms, switch between query form types, set up deformations to become a simple Form form, perform new creation, etc.

When to Use

When your forms need to interact with the server or need multiple cell styles, ProTable is the right choice.

Code Demo

Querying a table

Downgrade to a normal table

Lightweight filter replacement query form

Forms without ToolBar

Nested tables

Left and right structure

Batch manipulation of tables

Manipulating query forms with formRef

RTL (النسخة العربية)

RTL means right-to-left.

Controlled table settings columns

You can hide some columns by default, but in the action column you can select

Tables polling network data

Search form customization

When the built-in form items don't meet our basic needs, we need to customize the default components, which we can use with fieldProps and renderFormItem.

fieldProps can pass the props through and set the select style and multi-select issues.

renderFormItem does the rewriting logic, passing in item and props for rendering, but note that we have to assign value and onChange to the props, otherwise the form won't get the parameters.

renderFormItem: (_, { type, defaultRender, formItemProps, fieldProps, . .rest }, form) => {
  if (type === 'form') {
    return null;
  }
  const status = form.getFieldValue('state');
  if (status ! == 'open') {
    return <Input {... .fieldProps} placeholder="Please enter test" />;
  }
  return defaultRender(_);
};

The definition of renderFormItem, the exact value of which can be seen by opening the console.

renderFormItem?: (
    item: ProColumns<T>,
    config: {
      value?: any;
      onChange?: (value: any) => void;
      onSelect?: (value: any) => void;
      type: ProTableTypes;
      defaultRender: (newItem: ProColumns<any>) => JSX.Element | null;
    },
    form: FormInstance,
  ) => JSX.Element | false | null;

Form action customization

Toolbar Customization

Configure toolbar rendering using the toolbar property extension.

Required Inquiry Form

Try to use initialValue to solve the problem, required fields are more frustrating

Form body customization

Internationalization-related configuration

ProTable has built-in support for internationalization, and as a component with a relatively small amount of text, we can implement internationalization ourselves at a low cost.

Here is the full amount of text

const enLocale = {
  tableForm: {
    search: 'Query',
    reset: 'Reset',
    submit: 'Submit',
    collapsed: 'Expand',
    expand: 'Collapse',
    inputPlaceholder: 'Please enter',
    selectPlaceholder: 'Please select',
  },
  alert: {
    clear: 'Clear',
  },
  tableToolBar: {
    leftPin: 'Pin to left',
    rightPin: 'Pin to right',
    noPin: 'Unpinned',
    leftFixedTitle: 'Fixed the left',
    rightFixedTitle: 'Fixed the right',
    noFixedTitle: 'Not Fixed',
    reset: 'Reset',
    columnDisplay: 'Column Display',
    columnSetting: 'Settings',
    fullScreen: 'Full Screen',
    exitFullScreen: 'Exit Full Screen',
    reload: 'Refresh',
    density: 'Density',
    densityDefault: 'Default',
    densityLarger: 'Larger',
    densityMiddle: 'Middle',
    densitySmall: 'Compact',
  },
};

// Generate the intl object
const enUSIntl = createIntl('en_US', enUS);
import { ConfigProvider } from '@ant-design/pro-provide';
// use
<ConfigProvider
  value={{
    intl: enUSIntl,
  }}
>
  <ProTable />
</ConfigProvider>;

Table using self-contained keyWords search

Value type examples

valueType - Date class

valueType - numeric class

valueType - Style Classes

valueType - Selection Classes

API

ProTable puts a layer of wrapping on top of antd's Table, supports some presets, and encapsulates some behaviors. Only api's that differ from antd Table are listed here.

request

request is the most important API of ProTable, request takes an object. The object must have data and success in it, and total is also required if manual paging is needed. request takes over the loading settings and re-executes them when the query form is queried and the params parameters are modified. Also the query form values and params parameters are brought in. The following is an example.

<ProTable<DataType, Params>
  // params is a parameter that needs to be self-contained
  // This parameter has higher priority and will override the parameters of the query form
  params={params}
  request={async (
    // The first parameter params is the combination of the query form and params parameters
    // The first parameter will always have pageSize and current, which are antd specifications
    params: T & {
      pageSize: number;
      current: number;
    },
    sort,
    filter,
  ) => {
    // Here you need to return a Promise, and you can transform the data before returning it
    // If you need to transform the parameters you can change them here
    const msg = await myQuery({
      page: params.current,
      pageSize: params.pageSize,
    });
    return {
      data: msg.result,
      // Please return true for success.
      // otherwise the table will stop parsing the data, even if there is data
      success: boolean,
      // not passed will use the length of the data, if it is paged you must pass
      total: number,
    };
  }}
/>

ProTable

RecordCreator

ColumnStateType

Search Search form

ColConfig

const defaultColConfig = {
  xs: 24,
  sm: 24,
  md: 12,
  lg: 12,
  xl: 8,
  xxl: 6,
};

Menu bar options configuration

export type OptionsType =
  | ((e: React.MouseEvent<HTMLSpanElement>, action?: ActionType) => void)
  | boolean;

export type OptionConfig = {
  density?: boolean;
  fullScreen?: OptionsType;
  reload?: OptionsType;
  setting?: boolean;
  search?: (SearchProps & { name?: string }) | boolean;
};

ActionRef manually triggered

Sometimes we need to manually trigger the reload of the table and other operations, we can use actionRef, the editable table also provides some operations to help us achieve our requirements faster.

interface ActionType {
  reload: (resetPageIndex?: boolean) => void;
  reloadAndRest: () => void;
  reset: () => void;
  clearSelected?: () => void;
  startEditable: (rowKey: Key) => boolean;
  cancelEditable: (rowKey: Key) => boolean;
}

const ref = useRef<ActionType>();

<ProTable actionRef={ref} />;

// refresh
ref.current.reload();

// Refresh and clear, the page number will also be reset, excluding the form
ref.current.reloadAndRest();

// Reset to default values, including forms
ref.current.reset();

// Clear the selected item
ref.current.clearSelected();

// start editing
ref.current.startEditable(rowKey);

// end editing
ref.current.cancelEditable(rowKey);

Columns column definition

Requesting remote data is more complicated, please see here for details.

valueType value type

ProTable encapsulates some commonly used value types to reduce repeated render operations. Configure a valueType to display formatted response data.

Batch operation

Like antd, batch operations need to be set to "rowSelection" to enable. Unlike antd, pro-table provides an alert to carry some information. You can customize it with tableAlertRender and tableAlertOptionRender. Set or return false to close.

Searching for forms

ProTable will generate a Form for filtering list data based on columns, and the final value will be returned based on the first parameter via request, which looks like.

<ProTable request={(params,sort,filter)=>{ all params}}>

As per the specification, table forms do not require any mandatory parameters, and all clicks on search and reset will trigger a request to initiate a query.

Form's columns are generated with different types based on valueType.

Columns with a valueType of index indexBorder option and no dataIndex and key will be ignored.

ListToolbar

Toolbar section for customizing forms.

Code Demo

ListToolBarProps

Toolbar configuration properties for lists and tables

SearchProps is a property of antd's Input.Search.

Setting

ListToolBarMenu

ListToolBarTabs